<template>
  <div class="my-header">
    <van-nav-bar title="Licorne purer">
      <!-- 右边 搜索, 心愿单 -->
      <template #right>
        <van-icon
          @click="checkWish"
          name="goods-collect-o"
          color="#000000"
          size="7vw
        "
        />
        &nbsp;&nbsp;&nbsp;
        <van-icon
          @click="checkLogin"
          v-if="!$store.state.uname"
          name="contact"
          color="#000"
          size="7vw"
        />
        <van-icon
          @click="checkMypage"
          v-if="$store.state.uname"
          name="manager"
          color="#000"
          size="7vw"
        />
      </template>
      <!-- 左边 导航栏 -->
      <template #left @click="yincang">
        <van-icon
          name="ellipsis"
          size="25px"
          color="#000000"
          @click="showPopup"
        />
        <!-- 导航内容 -->
        <van-popup
          v-if="true"
          v-model="show"
          position="left"
          :style="{ height: '100%' }"
          closeable
          close-icon="cross"
          close-icon-position="top-right"
        >
          <img
            src="../assets/img/toubiao.jpg"
            style="
              text-align: center;
              width: 57vw;
              height: 50px;
              /* margin: 5px 0; */
              margin-right: 100px;
              margin-left: 10px;
            "
            @click="ZhuYe()"
          />
          <van-collapse v-model="activeName" accordion>
            <van-cell
              title="首页"
              icon="wap-home"
              label="更多精彩"
              size="large"
              @click="ZhuYe()"
            />
            <van-cell
              title="中式婚服"
              icon="thumb-circle"
              label="平淡自然含蓄委婉，典雅清新的审美情趣"
              size="large"
              @click="zhongshi()"
            />
            <van-cell
              title="西式婚服"
              icon="gem"
              label="以温婉与优雅姿态，
                     重温流年里的浪漫"
              size="large"
              @click="xishi()"
            />
            <van-cell
              title="个性订制"
              icon="service"
              label="自由随性，另一种浪漫的存在"
              size="large"
              @click="gexing()"
            />
            <van-cell
              title="专项服务"
              icon="photograph"
              label="专业团队,自然纪实,克拉自由"
              size="large"
              @click="sheying()"
            />
            <van-cell
              title="加入我们"
              icon="point-gift"
              label="婚博会--期待你的加入"
              size="large"
              @click="weikaif()"
              style="z-index:10;"
            />
          </van-collapse>
          <!-- 导航底部 -->
          <van-grid :border="false" :column-num="3" square>
            <van-grid-item icon="user-o" @click="geren()" text="个人" />
            <van-grid-item icon="location-o" @click="dingwei()" text="定位" />
            <van-grid-item icon="service-o" text="客服" @click="kef()" />
          </van-grid>
        </van-popup>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      show: false,
      activeName: "1",
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    weikaif() {
      this.reload();
      this.$router.push("/upload");
    },
    //个人跳转
    geren() {
      this.reload();
      this.$router.push("/means");
    },
    //定位跳转
    dingwei() {
      this.reload();
      this.$router.push("/location");
    },
    //中式婚纱
    zhongshi() {
      this.reload();
      this.$router.push("/chinese");
    },
    //西式婚纱
    xishi() {
      this.reload();
      this.$router.push("/western");
    },
    //个性定制
    gexing() {
      this.reload();
      this.$router.push("/personality");
    },
    //摄影跳转
    sheying() {
      this.reload();
      this.$router.push("/syzs");
    },
    //主页跳转
    ZhuYe() {
      this.reload();
      this.$router.push("/");
    },
    // 心愿单跳转
    checkWish() {
      this.reload();
      this.$router.push("/wish");
    },
    // 登录跳转
    checkLogin() {
      this.reload();
      this.$router.push("/login");
    },
    // 登录跳转
    checkMypage() {
      this.reload();
      this.$router.push("/means");
    },
    kef() {
      this.reload();
      this.$router.push("/consultservice");
    },
  },
};
</script>

<style scoped>
::v-deep .van-nav-bar .van-icon {
  color: #000000;
}
::v-deep .van-nav-bar {
  text-align: start;
}
::v-deep .van-nav-bar__title {
  margin-top: 0;
  font-size: 6vw;
  font-weight: 900;
  font-family: Prata, serif;
}
::v-deep .van-grid-item__content {
  color: white;
  background-color: #000000;
}
::v-deep .van-grid-item__text {
  color: white;
}
::v-deep .van-icon-service-o:before {
  color: white;
}
::v-deep .van-icon-location-o:before {
  color: white;
}
::v-deep .van-icon-user-o:before {
  color: white;
}
::v-deep .van-nav-bar__content {
  height: 13vw;
}
::v-deep .van-popup--left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
